<template>
    <div class="bannerdialog">
        <el-dialog :title="form.id > 0 ? '编辑' : '添加'" :visible.sync="info.isShow" @close="reset" fullscreen>

            <el-form :model="form" :rules="rules" ref="dialog">

                <el-form-item label="活动标题" prop="title" :label-width="formLabelWidth">
                    <el-input v-model="form.title" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="一级分类" prop="first_cateid" :label-width="formLabelWidth">
                    <el-select v-model="form.first_cateid" @change="Frist" placeholder="请选择一级分类">
                        <!-- <el-option v-for="item in cateList" :key="item.id" :label="item.catename" :value="item.id">
                        </el-option> -->
                    </el-select>
                </el-form-item>

                <el-form-item label="二级分类" prop="second_cateid" :label-width="formLabelWidth">
                    <el-select v-model="form.second_cateid" placeholder="请选择二级分类">
                        <el-option v-for="item in Second" :key="item.id" :label="item.catename" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>

                <!-- 这个是文件上传  商品图片-->
                <el-form-item label="活动图片" :label-width="formLabelWidth" prop="img">
                    <!-- 没有云服务器，使auto upload默认为true变为false -->
                    <el-upload v-if="form.id" action="" list-type="picture-card" :limit="1" :auto-upload="false"
                        :on-exceed="() => { $message.error('超出最大限制') }" :on-change="change" :file-list="imgArr">
                        <i class="el-icon-plus"></i>
                    </el-upload>

                    <el-upload v-else action="" list-type="picture-card" :limit="1"
                        :on-exceed="() => { $message.error('超出最大限制') }" :on-change="change" :file-list="arr">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                </el-form-item>

                <!-- 状态-->
                <el-form-item label="状态" prop="status" :label-width="formLabelWidth">
                    <el-switch v-model="form.status" active-color="tomato" inactive-color="#ccc" :active-value="1"
                        :inactive-value="2">
                    </el-switch>
                </el-form-item>

                <el-form-item label="商品描述" prop="description" :label-width="formLabelWidth">
                    <template>
                        <WangEditor ref="description" id="description" width="100%" />
                    </template>
                </el-form-item>

            </el-form>


            <div slot="footer" class="dialog-footer">
                <div slot="footer" class="dialog-footer">
                    <el-button @click="reset">取 消</el-button>
                    <el-button type="primary" @click="submit">确 定</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>


<script>
import { mapState, mapActions } from 'vuex';
import WangEditor from "vue-wangeditor"
export default {
    data() {
        return {
            form: {
                title: '',
                img: '',
                status: 2,
                description: '',
                first_cateid: '',
                second_cateid: '',
            },
            arr: [],
            rules: {
                title: { required: true, message: '请输入活动标题', trigger: "blur" },
                img: { required: true, message: '请选择活动图片', trigger: "blur" }
            },
            formLabelWidth: '120px',
            Second: []
        }
    },
    props: ["info"],
    computed: {
        ...mapState("banner", ["bannerlist", "bannercount"])
    },
    methods: {
        ...mapActions("banner", ["getbannerlist", "getbannercount"]),
        reset() {
            this.form = {
                title: '',
                img: '',
                status: 2,
                description: '',
                first_cateid: '',
                second_cateid: '',
            },
                this.info.isShow = false
            // 清除选择的图片
           this.imgArr = []
           this.arr =  []
        },
        Frist() {

        },
        //图片上传事件
        change(file) {
            this.form.img = file.raw;
        },
        submit() {
            this.form.description = this.$refs.description.getHtml();
            this.$refs.dialog.validate(val => {
                if (val) {
                    if (this.form.id) {
                        //点击编辑
                        this.$Api.banneredit(this.form).then(res => {
                            if (res.code == 200) {
                                this.$message.success(res.msg);
                                this.getbannerlist({ size: 5, page: this.page });
                                this.reset();
                            } else {
                                this.$message.error(res.msg);
                            }
                        })
                    } else {
                        //点击新增
                        this.$Api.banneradd(this.form).then(res => {
                            if (res.code == 200) {
                                this.$message.success(res.msg);

                                this.getbannercount();

                                this.getbannerlist({ size: 5, page: Math.ceil((this.total + 1) / 5) });
                                this.$store.commit('banner/changeSelect', true);
                                this.reset();
                            }
                        })
                    }
                }
            })
        },

    },
    components: {
        WangEditor
    },
}

</script>


<style leng='less' scoped>

</style>